<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="mt-2">
    <wd-search v-model="searchValue" placeholder-left @search="handleSearch" />
    <button @click="handleTest">111</button>
  </view>

  <!-- <view id="mapContainer" @click="log"></view> -->

  <!--
    <view class="text-center mt-8">
      当前平台是：
      <text class="text-green-500">{{ PLATFORM.platform }}</text>
    </view>
    <view class="text-center mt-4">
      模板分支是：
      <text class="text-green-500">base</text>
    </view>
  </view> -->
  <view class="ditu">
    <map
      style="width: 100%; height: 200px"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      :markers="marker"
      @markertap="toMap()"
    ></map>
  </view>

  <view @click="closeOutside">
    <wd-drop-menu>
      <wd-drop-menu-item
        class="w-full"
        title="风格"
        v-model="value1"
        :options="option1"
        @change="handleChange1"
      />
      <wd-drop-menu-item
        class="w-full"
        title="阶段"
        v-model="value2"
        :options="option2"
        @change="handleChange2"
      />
      <wd-drop-menu-item
        class="w-full"
        title="智能排序"
        v-model="value3"
        :options="option3"
        @change="handleChange3"
      />
    </wd-drop-menu>
  </view>
  <view class="content">
    <!-- no data -->
    <view v-if="data.length === 0" class="w-full flex flex-col items-center">
      <h1 class="text-2xl">暂无数据...</h1>
    </view>
    <!-- data -->
    <view v-else>
      <block v-for="(item, index) in data" :key="index">
        <view class="article-shadow tn-margin" @click="handleClick(item)">
          <view class="tn-flex">
            <view
              class="image-pic tn-margin-sm"
              :style="'background-image:url(' + item.image + ')'"
            >
              <view class="image-article"></view>
            </view>
            <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%">
              <view class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
                {{ item.workoutName }}
              </view>
              <view class="tn-padding-top-xs" style="min-height: 105rpx">
                <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
                  {{ item.desc }}
                </text>
              </view>
              <view class="tn-flex tn-flex-row-between tn-flex-col-between">
                <view
                  v-for="(label_item, label_index) in item.label"
                  :key="label_index"
                  class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold"
                  :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]"
                >
                  <text class="tn-tag-content__item--prefix">#</text>
                  {{ label_item }}
                </view>
                <view
                  class="justify-content-item tn-color-gray tn-text-center tn-color-gray--disabled"
                  style="padding-top: 5rpx"
                >
                  <text class="tn-icon-footprint tn-padding-right-xs tn-text-lg"></text>
                  <text class="tn-padding-right tn-text-df">{{ item.collectionCount }}</text>
                  <text class="tn-icon-like tn-padding-right-xs tn-text-lg"></text>
                  <text class="tn-text-df">{{ item.likeCount }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import PLATFORM from '@/utils/platform'
import { supabase } from '@/utils/init'
import QQMapWX from '../../utils/qqmap-wx-jssdk.js'

// import loadJs from '../loadJs'
// // 导入适配后的 DOMOverlay.js
// import { initMap } from '../DOMOverlay'
const data = ref([])
const searchValue = ref('')
const latitude = ref(39.90469)
const longitude = ref(116.40717)
const scale = ref(14)
const marker = ref([])

const handleTest = () => {
  const id = 111
  uni.navigateTo({
    url: '../test/test?id=' + id,
  })
}

const getLocation = () => {
  uni.authorize({
    scope: 'scope.userLocation',
    success() {
      const location = {
        longitude: longitude.value,
        latitude: latitude.value,
        province: '',
        city: '',
        area: '',
        street: '',
        address: '',
      }
      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        success: function (res) {
          uni.setStorageSync('latitude', latitude.value)
          uni.setStorageSync('longitude', longitude.value)
          location.longitude = res.longitude
          location.latitude = res.latitude
          const qqmapsdk = new QQMapWX({
            key: 'OHVBZ-OVIWV-T6LPR-5MTGD-K6NKO-6VBRN', // 申请的key
          })
          qqmapsdk.reverseGeocoder({
            location,
            success: function (res) {
              const info = res.result
              location.province = info.address_component.province
              location.city = info.address_component.city
              location.area = info.address_component.district
              location.street = info.address_component.street
              location.address = info.address
              console.log(location)
            },
          })
        },
        fail: function (res) {
          console.log(res)
        },
      })
    },
  })
}

const handleSearch = () => {
  console.log(searchValue.value)
  getData(searchValue.value, '', '')
}
defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
onLoad(async () => {
  await getLocation()
  console.log('当前位置信息', latitude.value + ', ' + longitude.value)
})
const getData = async (wLike, wKey, wValue) => {
  let tempData = []
  try {
    if (wLike !== '') {
      const likeStr = '%' + wLike + '%'
      const { data: workouts, error } = await supabase
        .from('workouts')
        .select('*')
        .like('workoutName', encodeURIComponent(likeStr))
      if (error) throw error
      tempData = workouts
    }
    if (wKey !== '') {
      const { data: workouts, error } = await supabase.from('workouts').select('*').eq(wKey, wValue)
      if (error) throw error
      tempData = workouts
    }
    if (wLike === '' && wKey === '') {
      const { data: workouts, error } = await supabase.from('workouts').select('*')
      if (error) throw error
      tempData = workouts
    }
    // 当为undefined转为空数组
    if (tempData === undefined) {
      tempData = []
    }
    data.value = tempData.map((item) => {
      return {
        ...item,
        userName: '可我会像',
        date: '2022年5月20日',
        color: 'red',
        label: ['水电'],
        title: '全新出发，新版本已上线，欢迎三连',
        mainImage: 'https://resource.tuniaokj.com/images/shop/prototype2.jpg',
        viewUser: {
          latestUserAvatar: [
            {
              src: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
            },
            {
              src: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
            },
            {
              src: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
            },
            {
              src: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
            },
          ],
          viewUserCount: 567,
        },
        collectionCount: 543,
        commentCount: 543,
        likeCount: 206,
      }
    })
  } catch (error) {
    console.warn(error.message)
  }
}

onMounted(() => {
  getData('', '', '')
  // 地图
  // loadJs('https://map.qq.com/api/gljs?v=1.exp&key=OHVBZ-OVIWV-T6LPR-5MTGD-K6NKO-6VBRN').then(() => {
  //   // 调用初始化地图方法
  //   initMap()
  // })
})

const handleClick = (item) => {
  uni.navigateTo({
    url: '../itemInfo/itemInfo?id=' + item.id,
  })
}

const value1 = ref<number>(0)
const value2 = ref<number>(0)
// 风格
const option1 = ref<Record<string, any>>([
  { label: '全部', value: 0 },
  { label: '现代', value: 1 },
  { label: '中式', value: 2 },
  { label: '欧式', value: 3 },
  { label: '美式', value: 4 },
  { label: '混搭', value: 5 },
  { label: '田园', value: 6 },
])
// 阶段
const option2 = ref<Record<string, any>>([
  { label: '全部', value: 0 },
  { label: '定金', value: 1 },
  { label: '设计', value: 2 },
  { label: '拆改', value: 3 },
  { label: '水电', value: 4 },
  { label: '木工', value: 5 },
  { label: '瓦工', value: 6 },
  { label: '油工', value: 7 },
  { label: '安装', value: 8 },
  { label: '完工', value: 9 },
  { label: '软装', value: 10 },
  { label: '入住', value: 11 },
  { label: '收官', value: 12 },
])
// 智能排序
const option3 = ref<Record<string, any>>([
  { label: '全部', value: 0 },
  { label: '定金', value: 1 },
])

function handleChange1({ value }) {
  console.log(value)
}
function handleChange2({ value }) {
  console.log(value)
}
const mapCenterLoc = ref(null)
</script>

<style>
.main-title-color {
  color: #d14328;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 0px;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-top: 200rpx;
  margin-right: auto;
  margin-bottom: 50rpx;
  margin-left: auto;
}

.text-area {
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter {
  font-size: 36rpx;
}

.operation {
  margin-top: 50rpx;
}

.demo-url {
  position: relative;
  width: 100%;
  padding: 30rpx;
  overflow-wrap: break-word;
}
/* 轮播 start*/
.card-swiper {
  height: 570rpx !important;
}

.card-swiper swiper-item {
  left: 30rpx;
  box-sizing: border-box;
  width: 450rpx !important;
  padding: 0rpx 0rpx 80rpx 0rpx;
  overflow: initial;
}

.card-swiper swiper-item .swiper-item {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
  transition: all 0.3s ease-in 0s;
  transform: scale(0.7) translate(0rpx, -104rpx);
  will-change: transform;
}

.card-swiper swiper-item.cur .swiper-item {
  transition: all 0.3s ease-in 0s;
  transform: none;
  will-change: transform;
}

.card-swiper swiper-item .swiper-item-text {
  display: block;
  width: 100%;
  height: 50%;
  height: 140rpx;
  margin-top: -100rpx;
  overflow: hidden;
  color: #000000;
  border-radius: 10rpx;
  transition: all 0.4s ease 0s;
  transform: translate(20rpx, -30rpx) scale(0.7, 0.7);
  will-change: transform;
}

.card-swiper swiper-item.cur .swiper-item-text {
  width: 500rpx !important;
  height: 137rpx;
  padding-left: 30rpx;
  margin-top: -150rpx;
  color: #ffffff;
  text-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease 0s;
  transform: translate(-25rpx, 20rpx) scale(0.9, 0.9);
  will-change: transform;
}

.image-banner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-banner image {
  width: 100%;
  height: 100%;
}
/* 轮播指示点 start*/
.indication {
  position: absolute;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36rpx;
}

.spot {
  position: relative;
  top: -100rpx;
  right: -270rpx;
  width: 10rpx;
  height: 10rpx;
  margin: 0 8rpx !important;
  background-color: #000;
  border-radius: 20rpx;
  opacity: 0.4;
}

.spot.active {
  width: 10rpx;
  background-color: #000;
  opacity: 1;
}
/* 计划内容 end*/
/* 资讯主图 start*/
.image-article {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border: 1rpx solid #f8f7f8;
  border-radius: 8rpx;
}

.image-pic {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  border-radius: 10rpx;
}

.article-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
/* 文字截取*/
.clamp-text-1 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.clamp-text-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
